<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <style>

  </style>
</head>
<body>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
  <!-- <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div> -->
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModa1" >
    创建新相册
  </button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModa2" >
    上传图片
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModa1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">输入相册名</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="text" class="button1">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary button2" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModa2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">请选择上传文件</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="file" class="button3">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary button2" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
  <div class="album">
  </div>
  <div class="photos">
  </div>
</div>
<script>

//逻辑是  点击新建相册-就会给服务器一个 name => 服务器 types.push(name) picture[name]=[],写入dB ，同时本地初始化相册 =>
//每一个type都生成一个 <a clss="type"> a.onclick=currentAlbum=event.target.class=>初始化图片
var currentAlbum="default";
initAlbum();
initPicture();
//初始化 相册名
function initAlbum(){
$.get("/init",data=>{
  data.types.forEach(type=>{
    var div=document.createElement("div");
        div.innerHTML=`
        <a class="${type}" href="#">${type}</a>`;
        div.firstElementChild.addEventListener("click",function (event){

            currentAlbum=event.target.className;
                initPicture();

        });
        $(".album").append(div.firstElementChild);
  })
});
}

function initPicture(){
  $(".photos").html("");
  $.get("/init",data=>{
     data.picture[currentAlbum].forEach(pic=>{
            var img=new Image();
            img.src="/img/"+pic.filename;
            img.style.width="100px";
            img.style.height="100px";
            document.body.querySelector(".photos").append(img);
     })
  })
}

//新建相册
var photosDom=$(".phtots")[0];
$(".button2").click(event=>{
  $.post("/createAlbum",{type:($(".button1").val())});
  $(".album").html("");
initAlbum();
});

//上传图片
    $(".button3")[0].onchange=function(event){
        console.log("111");
      const formdata=new FormData();
      const file=event.target.files[0];
      formdata.append("myfiles",file);
      formdata.append("type",currentAlbum);
      // console.log(formdata);
        // $.post("/upPicture",{formdata:formdata});
      // fetch("/test",{
      //   method:"post",
      //   headers:{"Content-Types":"application"/"json"},
      //   body:formdata
      // });
      var xml=new XMLHttpRequest();
      xml.open("POST","/upPicture");
      // // xml.setRequestHeader("Content-Type","application/json");
      xml.responseType="json";
      xml.onreadystatechange=function (){
        if(xml.status == 200 && xml.readyState == 4){
          const imgUrl="/img/"+xml.response.filename;
          addImg(imgUrl);
        }
      }
        xml.send(formdata);
    function addImg(url){
            const img=new Image();
            img.src=url;
            img.style.width="100px";
            img.style.height="100px";
            document.querySelector(".photos").appendChild(img);
    }
  }
</script>
</body>
</html>
